<template>
  <div>
    <div class="search_ipt">
      <van-icon @click="searchFunc" class="search_ipt_icon" name="search" />
      <input
        class="search_ipt_info"
        type="text"
        placeholder="Search"
        v-model="searchTerm"
      />
      <van-icon class="close_font" name="close" />
    </div>
    <!-- <div :class="isInput ? '' : 'cancel'">Cancel</div> -->
  </div>
</template>


<script setup>
import {ref} from 'vue'
import { Icon as vanIcon} from "vant"
const searchTerm = ref('')

const searchFunc = ()=>{

}
</script>
<style lang="less" scoped>
.search_ipt {
  width: 327px;
  height: 36px;
  background: #292d39;
  border: 1px solid #363942;
  border-radius: 4px;
  margin: 0 auto;
  margin-top: 32px;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  position: relative;
  &_icon {
    width: 20px;
    height: 20px;
    color: #eeeeee;
    margin: 8px 0px 8px 8px;
  }
  .van-icon {
    font-size: 16px;
    font-weight: 600;
  }
  &_info {
    margin-left: 10px;
    height: 19px;
    font-size: 16px;
    color: #71737b;
    border: 1px;
    background-color: rgba(0, 0, 0, 0);
  }
  .cancel {
    height: 14px;
    font-size: 12px;
    font-family: AppleSystemUIFont;
    color: #cbfb5e;
    line-height: 15px;
    position: absolute;
    right: -100%;
  }
  .close_font{
    margin-right: 8px;
    position: absolute;
    right: 0;
  }
}
.after_ipt {
  width: 282px;
}
</style>
